<template>
	<div id="app">
		<router-view />
	</div>
</template>

<script>
import setIntroduction from '@/utils/setIconfont.js';
import { Local } from '@/utils/storage.js';
import Setings from '@/layout/navBars/topBar/setings.vue';
export default {
	name: 'App',
	components: { Setings },
	mounted() {
		this.initSetIconfont();
		this.openSetingsDrawer();
		this.getLayoutThemeConfig();
	},
	computed: {
		// 获取版本号
		getVersion() {
			return true;
		},
	},
	methods: {
		// 设置初始化，防止刷新时恢复默认
		initSetIconfont() {
			// 设置批量第三方 icon 图标
			setIntroduction.cssCdn();
			// 设置批量第三方 js
			setIntroduction.jsCdn();
		},
		// 布局配置弹窗打开
		openSetingsDrawer() {
			this.bus.$on('openSetingsDrawer', () => {
				this.$refs.setingsRef.openDrawer();
			});
		},
		// 获取缓存中的布局配置
		getLayoutThemeConfig() {
			if (Local.get('themeConfigPrev')) {
				this.$store.dispatch('themeConfig/setThemeConfig', Local.get('themeConfigPrev'));
				document.documentElement.style.cssText = Local.get('themeConfigStyle');
			} else {
				Local.set('themeConfigPrev', this.$store.state.themeConfig.themeConfig);
			}
		},
	},
	watch: {
		// 监听路由的变化
		$route: {
			handler(to) {
				this.$nextTick(() => {
					let webTitle = '';
					let { globalTitle } = this.$store.state.themeConfig.themeConfig;
					to.path === '/login' ? (webTitle = to.meta.title) : (webTitle = this.$t(to.meta.title));
					document.title = `${webTitle} - ${globalTitle}` || globalTitle;
				});
			},
			deep: true,
			immediate: true,
		},
	},
	destroyed() {
		this.bus.$off('openSetingsDrawer');
	},
};
</script>

<style>
.mt20 {
	margin-top: 20px;
}

.mb20 {
	margin-bottom: 20px;
}

.textOver {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 120px;
	cursor: pointer;
}


.priceLog{
	cursor: pointer;
	user-select: none;;
	display: flex;
	background-color: rgba(0,0,0,.7);
	padding: 5px;
	border-radius: 8px;
	justify-content: space-around;
	color: greenyellow;
	margin-bottom: 10px;
}

.priceLog:last-child{
	margin-bottom: 0;
}

.cell {
  font-size: 14px !important;
  text-align: center !important;
}

textarea{
	width: 100%;
	height: 250px;
}

</style>
